<!-- 视频播放 -->
<template>
	<view class="video_play" v-if="url != ''">
		<video
			id="myVideo"
			:src="url"
			@error="videoErrorCallback"
			:duration="duration"
			:show-center-play-btn="false"
			vslide-gesture-in-fullscreen
			:controls="controls"
			@timeupdate="timeupdate"
			:show-fullscreen-btn="false"
			@fullscreenchange="fullscreenchange"
		></video>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url: false, //视频url
			duration: '', //指定视频时长
			videoContext: null, //视频实例
			controls: false //视频底部操作栏 播放/暂停
		};
	},
	onLoad: function(options) {
		//点击视频后默认两秒后再打开
		uni.showLoading({
			title: '视频加载中'
		});
		this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例
		this.duration = options.duration ? Number(options.duration) : ''; // 试播时间
		setTimeout(() => {
			uni.hideLoading();
			this.url = options.url; // 传过来的视频地址
			this.$nextTick(() => {
				this.videoContext.requestFullScreen();
				this.videoContext.play();
				setTimeout(() => {
					this.controls = true;
				}, 2000);
			});
		}, 1000);
	},
	methods: {
		// 视频播放出错触发
		videoErrorCallback() {
			uni.showToast({
				title: '视频播放出错'
			});
		},

		//退出或者进入全屏触发
		fullscreenchange(e) {
			//电脑点不开正常 因为我设置了进去默认全屏视频 电脑会自动关闭全屏 关闭全屏会再出触发这个方法 所以点不开 电脑测试注释这里面的代码就行了
			if (e.detail.fullScreen == false) {
				this.url = false;
				uni.navigateBack({
					delta: 1
				});
			}
		},

		//播放进度发生变化时触发
		timeupdate(e) {
			if (this.duration == '') {
				return;
			} else if (e.detail.currentTime >= this.duration) {
				this.videoContext.seek(0);
				this.videoContext.pause();
				uni.showToast({
					title: '试看结束'
				});
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.video_play {
	width: 100%;
	height: 100vh;
	background-color: #000000;
}
</style>
